<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 20px;
      }
      .demo1 {
        height: 50px;
        background-color: aqua;
      }
      .box1 {
        background-color: aqua;
        padding: 5px;
      }
      .box2 {
        background-color: orange;
      }
      .list {
        width: 200px;
        height: 200px;
        background-color: pink;
        overflow: auto;
        /* 子元素高度超出父元素高度时，会显示滚动条 */
      }
      li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>

      <!-- prevent：阻止默认事件（常用） -->
      <a href="https://www.bilibili.com/" @click.prevent="showInfo"
        >点我提示信息,a标签不会跳转</a
      >

      <!-- stop：阻止事件冒泡（常用） -->
      <div class="demo1" @click="showInfo">
        <!-- <button @click.stop="showInfo">点我提示信息, 会阻止事件冒泡</button> -->
        <!-- 事件修饰符可以连缀使用 -->
        <a href="https://www.bilibili.com/" @click.prevent.stop="showInfo"
          >点我提示信息, 会阻止事件冒泡</a
        >
      </div>

      <!-- once：事件只触发一次（常用） -->
      <button @click.once="showInfo">我只能提示一次</button>

      <!-- capture：使用事件的捕获模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">点我事件捕获</div>
      </div>

      <!-- self：只有 event.target 是当前操作的元素时才触发 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>

      <!-- passive：事件的默认行为立即执行，无需等待事件回调函数执行完毕 -->
      <!-- 一般事件需要先执行事件回调,等事件回调执行完毕,再执行默认行为 -->
      <ul class="list" @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data() {
        return {
          name: "b站",
        };
      },
      methods: {
        showInfo(e) {
          // e.preventDefault();// 阻止默认行为
          // e.stopPropagation();// 阻止事件冒泡
          alert("同学你好!");
          console.log(e.target);
        },
        showMsg(msg) {
          console.log(msg);
        },
        demo() {
          for (let i = 0; i < 100; i++) {
            console.log("#");
          }
          console.log("累坏了");
        },
      },
    });
  </script>
</html>
